<template>
    <div class="page-search">
        <div class="layout">
            <div class="navbar-wrap">
                <div class="Navbarold">
                    <nav>
                        <router-link tag="div" to="/home" class="navbar-logo">
                            <span class="navbar-back"></span>
                        </router-link>
                        <div class="navbar-title">猫眼电影</div>
                        <div class="navbar-button"></div>
                    </nav>
                </div>
            </div>
            <div class="page-content search-theme-default">
                <div class="search-wrapper">
                    <div class="search-header">
                        <div class="input-wrapper">
                            <img src="../assets/images/search.png" alt="" class="search-icon">
                            <input type="text" class="search-input" placeholder="搜电影、搜影院" v-model="keyword">
                            <img v-show="showIcon" src="../assets/images/maoyansearch.png" alt="" @click="clear" class="del-input">
                        </div>
                        <router-link to="/home" class="cancel">取消</router-link>
                    </div>
                    <div class="search-history" v-if="hslist.length&&flag">
                        <div class="history-item" v-for="(item,index) in hslist" :key="index">
                            <span class="history-icon"></span>
                            <div class="word one-line" @click="selectWord(index)">
                                {{item}}
                            </div>
                            <div class="del-word" @click="del(index)"></div>
                        </div>
                    </div>
                    <div class="search-result" v-if="!flag">
                        <div class="result-wrapper">
                            <div class="result">
                                <div class="checkTab">
                                    <h3 :class="{'active':tabindex==index}" @click="checktab(index)" v-for="(item,index) in tablist" :key="index">{{item}}</h3>
                                </div>
                                <div class="list" v-if="tabindex==0">
                                    <router-link tag="div" :to="'/detail?id='+ item.id" class="movie cell" v-for="(item) in movielist" :key="item.id">
                                        <img :src="item.poster" alt="" class="poster">
                                        <div class="info">
                                            <div class="name-score">
                                                <p class="name">
                                                    <span class="one-line">
                                                       {{item.name}}
                                                    </span>
                                                </p>
                                                <span class="score" v-if="item.score">
                                                    <span class="num">
                                                        {{item.score}}
                                                    </span>
                                                    分
                                                </span>
                                            </div>
                                            <div class="detail-section">
                                                <div class="detail-items">
                                                    <p class="ename">{{item.ename}}</p>
                                                    <p class="catogary">{{item.catogary}}</p>
                                                    <div class="release">{{item.release}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </router-link>
                                </div>
                                <div class="list" v-if="tabindex==1">
                                    <router-link tag="div" :to="'/cinema?id='+item.id" class="cinema cell" v-for="item in cinemalist" :key="item.id">
                                        <div class="info">
                                            <p class="name-price">
                                                <span class="name one-line">{{item.info.name}}</span>
                                                <span class="sell-price">
                                                    <span class="price">{{item.info.price}}</span>远起
                                                </span>
                                            </p>
                                            <p class="address one-line">
                                                {{item.info.address}}
                                            </p>
                                            <div class="feature-tags">
                                                <span :class="{'featrue':k=='小吃'}" v-for="(k,i) in item.info.tags" :key="i">{{k}}</span>
                                                <!-- <span class="featrue">小吃</span> -->
                                            </div>
                                        </div>
                                    </router-link>
                                </div>
                                <div class="list" v-if="(!movielist.length || !cinemalist.length)&& !loading">
                                    <div class="nothing">
                                        <img src="../assets/images/nothing.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="loading" v-if="loading">
                                <van-loading type="spinner" size="24px">搜索中...</van-loading>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {getSearchFilm,getSearchCinemas} from '../api/search.js'
    export default {
        data() {
            return {
                movielist: [],//电影列表
                cinemalist:[],//影院列表
                keyword:'',
                cityId:null,
                keyTime:null,
                hslist:[],
                showIcon:false,
                flag:true,
                tablist:['电影','影院'],
                tabindex:0,
                loading:false,
            };
        },
        methods: {
            //搜电影
            getSearchFilmFun(word,ci){
                getSearchFilm({keyword:word,ci}).then(data=>{
                    // console.log(data);
                    if (data.length) {
                        this.loading=false
                    }
                    this.movielist=data
                })
            },
            //搜影院
            getSearchCinemaFun(word,ci){
                getSearchCinemas({keyword:word,ci}).then(data=>{
                    // console.log(data);
                     if (data.length) {
                        this.loading=false
                     }
                    this.cinemalist=data
                })
            },
            //删除历史记录
            del(index){
                this.hslist.splice(index,1)
                window.localStorage.setItem("hslist",JSON.stringify(this.hslist))
            },
            //通过历史记录进行搜索
            selectWord(index){
                this.keyword=this.hslist[index]
            },
            clear(){
                this.keyword=''
            },
            checktab(index){
                this.tabindex=index

            }
        },
        created() {
            this.cityId=this.$route.query.ci
            let temp = JSON.parse(window.localStorage.getItem("hslist"))
            this.hslist=temp==null?[]:temp
        },
        watch:{
            'keyword':function () {
                this.loading=true
                this.showIcon=true
                this.flag=false
                if (this.keyword!='') {
                        let isinclude = this.hslist.includes(this.keyword)
                        if (!isinclude) {
                            this.hslist=[...this.hslist,this.keyword]                         
                        }
                }
                 if(this.keyTime !== null){
                    clearTimeout(this.keyTime);
                }
                this.keyTime = setTimeout(() => {
                    window.localStorage.setItem("hslist",JSON.stringify(this.hslist))
                    this.getSearchFilmFun(this.keyword,this.cityId)
                    this.getSearchCinemaFun(this.keyword,this.cityId)
                },500)
                if (this.keyword=='') {
                    this.showIcon=false
                    this.flag=true
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.page-search{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background-color: #f5f5f5;

    .layout{
        .navbar-wrap{
            .Navbarold {
                background-color: #e54847!important;
                height: 38px;
                overflow: hidden;
                position: relative;
                padding: 6px;
                box-sizing: content-box;

                &>nav{
                    width: 100%;
                    display: -webkit-box;

                    .navbar-logo{
                        width: 100px;
                        background-size: 37%;

                        .navbar-back{
                            width: 36px;
                            height: 36px;
                            display: block;
                            z-index: 999;

                            &::after{
                                content: '';
                                position: absolute;
                                width: 13px;
                                height: 13px;
                                top: 16px;
                                left: 12px;
                                transform: rotate(45deg);
                                border: 2px solid #fff;
                                border-width: 0 0 2px 2px;
                            }
                        }
                    }
                    .navbar-title{
                        -webkit-box-flex: 1;
                        color: #fff;
                        font-size: 18px;
                        text-align: center;
                        line-height: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        position: relative;
                    }
                    .navbar-button{
                        position: relative;
                        width: 100px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                    }
                }
            }
        }
        .page-content{
            .search-wrapper{
                background-color: #f5f5f5;
                height: 100%;

                .search-header{
                    display: flex;
                    align-items: center;
                    padding: 8px 0 8px 10px;
                    background-color: #f5f5f5;
                    border-bottom: 1px solid #e5e5e5;
                    position: relative;
                    z-index: 1;

                    .input-wrapper{
                        padding: 0 10px;
                        border: 1px solid #e6e6e6;
                        border-radius: 5px;
                        background-color: #fff;
                        flex-grow: 1;

                        .search-input{
                            flex: 1;
                            border: none;
                            font-size: 13px;
                            color: #333;
                            line-height: 20px;
                            padding: 4px 0;
                            width: calc(100% - 40px);
                        }
                        .del-input{
                            width: 15px;
                            height: 15px;
                            float: right;
                            position: relative;
                            top: 6px;
                        }
                    }
                    .cancel{
                        height: 30px;
                        line-height: 30px;
                        padding: 0 10px;
                        font-size: 16px;
                        color: #f03d37;
                    }
                    .search-icon{
                        width: 15px;
                        height: 15px;
                        margin-right: 6px;
                        float: left;
                        position: relative;
                        top: 6px;
                    }
                }
                .search-history{
                    background-color: #fff;

                    .history-item{
                        margin-left: 15px;
                        display: flex;
                        justify-content: space-between;
                        border-bottom: 1px solid #e5e5e5;
                        line-height: 44px;
                        align-items: center;

                        .history-icon{
                            width: 15px;
                            height: 15px;
                            margin-right: 10px;
                            background: url("../assets/images/recent-search.png") no-repeat;
                            background-size: contain;
                            display: inline-block;
                            flex: 0 0 auto;
                        }
                        .word{
                            color: #333;
                            font-size: 15px;
                            flex: 1 1 auto;
                            display: inline-block;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                        .del-word{
                            background-image: url("../assets/images/delete.png");
                            background-repeat: no-repeat;
                            background-position: 15px;
                            background-size: 10px;
                            align-self: center;
                            padding: 17px 15px;
                            width: 10px;
                            height: 10px;
                            flex: 0 0 auto;
                        }
                    }
                    .history-item:last-child{
                         border-bottom:none
                    }
                }
                .search-result{
                    display: block;

                    .result-wrapper{
                        height: 100%;

                        .result{
                            margin-bottom: 10px;
                            background-color: #fff;

                            .checkTab{
                                display: flex;
                                justify-content: space-around;
                                &>h3{
                                    font-size: 15px;
                                    color: #999;
                                    padding: 9px 15px;
                                    position: relative;

                                }
                                .active{
                                    color: #e54847;
                                    &::after{
                                        content: '';
                                        position: absolute;
                                        bottom: 0;
                                        left: 0;
                                        right: 0;
                                        margin: 0 auto;
                                        width: 20px;
                                        height: 2px;
                                        background-color: #f03d37;

                                    }
                                }
                            }

                            .list{
                                border-bottom: 1px solid #e6e6e6;
                                padding-left: 15px;
                                border-top: 1px solid #e6e6e6;

                                .movie{
                                    padding: 12px 0;
                                    min-height: 90px;
                                    border-bottom: 1px solid #e6e6e6;

                                    .poster{
                                        background-color: #eee;
                                        width: 64px;
                                        height: 90px;
                                        float: left;
                                        margin-right: 10px;
                                    }
                                    .info{
                                        margin-right: 15px;
                                        margin-top: 1px;

                                        .name-score{
                                            font-size: 16px;
                                            color: #222;
                                            display: flex;
                                            justify-content: space-between;
                                            margin-bottom: 2px;

                                            .name{
                                                height: 24px;
                                                line-height: 24px;
                                                display: flex;
                                                align-items: center;
                                                flex-grow: 1;
                                                max-height: 24px;
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;

                                                .one-line{
                                                    display: inline-block;
                                                    font-weight: 700;
                                                    font-size: 17px;
                                                    white-space: nowrap;
                                                    text-overflow: ellipsis;
                                                    overflow: hidden;
                                                }
                                            }
                                            .score{
                                                color: #fa0;
                                                font-size: 16px;
                                                flex-shrink: 0;
                                                padding-left: 5px;

                                                .num{
                                                    font-size: 16px;
                                                }
                                            }
                                        }
                                        .detail-section{
                                            position: relative;

                                            .detail-items{
                                                flex-grow: 1;
                                                overflow: hidden;
                                                padding-right: 10px;
                                                margin-right: 48px;
                                                min-height: 64.5px;

                                                .ename{
                                                    height: 19.5px;
                                                    line-height: 19.5px;
                                                    font-size: 13px;
                                                    color: #666;
                                                    margin-top: 2px;
                                                    white-space: nowrap;
                                                    text-overflow: ellipsis;
                                                    overflow: hidden;
                                                }
                                                .release,
                                                .catogary{
                                                    height: 19.5px;
                                                    line-height: 19.5px;
                                                    font-size: 13px;
                                                    color: #666;
                                                    margin-top: 2px;
                                                }
                                            }
                                        }
                                    }
                                }
                                .cinema {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    padding: 15px 15px 15px 0;

                                    .info{
                                        flex: 1;
                                        overflow: hidden;

                                        .name-price{
                                            margin: 0;
                                            font-size: 16px;
                                            color: #000;
                                            margin-bottom: 6px;
                                            display: flex;

                                            .sell-price{
                                                font-size: 11px;
                                                color: #999;
                                                white-space: nowrap;
                                                margin-left: 10px;

                                                .price{
                                                    font-size: 17px;
                                                    color: #ef4238;
                                                }
                                            }
                                        }
                                        .address{
                                            font-size: 13px;
                                            color: #999;
                                        }
                                        .feature-tags{
                                            margin-top: 7px;

                                            &>span{
                                                border: 1px solid #589daf;
                                                color: #589daf;
                                                position: relative;
                                                display: inline-block;
                                                padding: 0 3px;
                                                height: 15px;
                                                line-height: 15px;
                                                border-radius: 2px;
                                                font-size: 12px!important;
                                                margin-right: 7px;
                                            }
                                            .featrue{
                                                color: #f90;
                                                border-color: #f90;
                                            }
                                        }
                                    }
                                }
                                .cell{
                                    border-bottom: 1px solid #e6e6e6;
                                }
                                .nothing{
                                    width: 100%;
                                    height: 80vh;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    background-color: #fff;

                                    &>img{
                                        width: 150px;
                                        height: 150px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &::-webkit-scrollbar {
        display: none;
      }
}
.loading{
    width: 100%;
    height: 80vh;
    position: fixed;
    top: 97px;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>